import React from "react"
import {
  Form,
  Input,
  InputNumber,
  Modal,
  Radio,
  Row,
  Col,
  TreeSelect
} from "antd"

import { IEditProps } from "./useDept"

const EditModal: React.FC<IEditProps> = ({
  form,
  setForm,
  modalConfig,
  setModalConfig,
  treeData,
  submitForm
}) => {
  const handleCancel = () => {
    setModalConfig({ ...modalConfig, visible: false })
  }

  const onFinish = () => {
    submitForm(form)
  }

  const onValuesChange = (changedValues) => {
    setForm({ ...form, ...changedValues })
  }

  return (
    <Modal
      title={`${modalConfig.title}部门`}
      visible={modalConfig.visible}
      destroyOnClose
      onCancel={handleCancel}
      width={600}
      okButtonProps={{ htmlType: "submit", form: "editForm" }}
    >
      <Form
        id="editForm"
        initialValues={form}
        onFinish={onFinish}
        onValuesChange={onValuesChange}
      >
        <Form.Item
          label="上级部门"
          name="parentId"
          rules={[{ required: true, message: "请选择上级部门" }]}
        >
          <TreeSelect
            style={{ width: "100%" }}
            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
            treeData={treeData}
            placeholder="请选择上级部门"
          />
        </Form.Item>
        <Row>
          <Col span={12}>
            <Form.Item
              label="部门名称"
              name="deptName"
              rules={[{ required: true, message: "请输入部门名称" }]}
            >
              <Input placeholder="请输入部门名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="显示排序"
              name="orderNum"
              rules={[{ required: true, message: "请输入显示排序" }]}
            >
              <InputNumber
                style={{ width: "100%" }}
                placeholder="请输入显示排序"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="负责人"
              name="leader"
              labelCol={{ span: 7 }}
              wrapperCol={{ span: 17 }}
            >
              <Input placeholder="请输入负责人" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="联系电话"
              name="phoneNumber"
              labelCol={{ span: 7 }}
              wrapperCol={{ span: 17 }}
            >
              <Input placeholder="请输入联系电话" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="邮箱"
              labelCol={{ span: 7 }}
              wrapperCol={{ span: 17 }}
              name="email"
            >
              <Input placeholder="请输入邮箱" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="部门状态"
              name="status"
              labelCol={{ span: 7 }}
              wrapperCol={{ span: 17 }}
            >
              <Radio.Group>
                <Radio value={1}>正常</Radio>
                <Radio value={2}>停用</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

export default EditModal
